<template>
  <div class="item">
    <div class="avatar">
      <el-avatar
        style="width: 200px; height: 200px"
        :src="proxy.imageUrl + avatar"
        fit="fill"
        @click="toUserDetail"
      />
    </div>
    <div class="info">
      <div class="categoryName" @click="toUserDetail">
        {{ nickName }}
      </div>
      <div class="profession">{{ profession }}</div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import bus from "../utils/EventBus";

const { proxy } = getCurrentInstance();
const router = useRouter();
const props = defineProps({
  avatar: String,
  nickName: String,
  profession: String,
  blogCount: Number,
  introduction: String,
  userId: Number,
});

const toUserDetail = () => {
  router.push("../user/" + props.userId);
  bus.emit("toUser");
};
</script>

<style lang='scss' scoped>
.item {
  height: 275px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border: 1px dashed #ddd;
  border-radius: 20px;

  .avatar{
    cursor: pointer;
  }

  .info{
    text-align: center;
    line-height: 25px;

    .categoryName{
      font-size: 20px;
      color: #79bbff;
      cursor: pointer;
    }

    .profession{
      font-size: 14px;
    }
  }
}
</style>